<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="data:," />
    <title>Magiz Demo</title>
    <style>
      html,
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.172.0/build/three.module.min.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.172.0/examples/jsm/"
        }
      }
    </script>
  </head>

  <body>
    <div id="magiz"></div>
    <div style="position: fixed; bottom: 24px; left: 24px; color: white">
      这是开发演示页面，样式可能变动或不完整 ( 最近更新: 2025/4/9 09:08:02 )
    </div>
  </body>

  <script type="module">
    // FIRST: git clone, npm i, npm run build
    import { Plan, styles, THREE, init, planLoops, planParams, modelParams } from './webGL.mjs'
    import { showAll } from './showAll.mjs'

    const handler = init()

    if (0) {
      // to show all the styles
      showAll(handler)
    } else {
      // to generate a building
      // 1. create a plan
      const plan = new Plan(planLoops)
      // 2. generate model from plan
      const model = plan.toModel(styles, planParams, modelParams)
      // 3. add model to three.js scene
      handler.scene.add(model)
    }
  </script>
</html>
